<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bb{
            margin:10px 15px;
            border:1px solid #999;
            background:#eee;
            padding:10px;
            border-radius:5px;
            position:relative;

        }
        .del{
            position:absolute;
            right:3px;
            top:3px;
            font-size:12px;
        }
        .time{
            margin-top:10px;
            font-size:12px;
        }
    </style>
</head>
<body>


    <div id="add_div" style="padding-top:130px;">
        <div style="width:100%;position:fixed;top:0px;left:0px;background:white;z-index:9999;">
        <h2>备忘录</h2>
        <hr />
        <div style="font-size:30px;cursor:pointer" onclick="to_add_bak()">+</div>
        </div>
        <div id="baksDiv">

        </div>
    </div>

    <div id="content_div" style="display:none">
        <h2 onclick="return_index()">返回 新增备忘录</h2>
        <hr />
        <div contentEditable id="cnt" style="height:300px;overflow: auto;border:1px solid red"></div>
    </div>

    <script>
        var baks =[];


        function showBaks(){
            if(localStorage.baks){
                baks = JSON.parse(localStorage.baks);
            }
            baksDiv.innerHTML = "";
            for(var i=baks.length-1;i>=0;i--){
                var bb  = document.createElement("div");
                bb.className = "bb";

                var bakEle = document.createElement("div");
                bakEle.className = "bak";
                bakEle.innerHTML = baks[i].content;

                var timeEle = document.createElement("div");
                timeEle.className = "time";
                timeEle.innerHTML = new Date(baks[i].createdate).toLocaleString();

                var delEle = document.createElement("div");
                delEle.className = "del";
                delEle.innerHTML = "删除";
                delEle.xuhao = i;
                delEle.onclick = function(){
                   if(confirm("哥，确定要删吗？")){
                       baks.splice(this.xuhao,1);
                       localStorage.baks = JSON.stringify(baks);
                       showBaks();
                   }
                };

                bb.appendChild(bakEle);
                bb.appendChild(timeEle);
                bb.appendChild(delEle);
                baksDiv.append(bb);
            }
        }

        showBaks();

        function Bak(content,createdate){
            this.content = content;
            this.createdate = createdate;
        }

        function to_add_bak(){
            add_div.style.display = "none";
            content_div.style.display= "block";
        }

        function return_index(){
            add_div.style.display = "block";
            content_div.style.display= "none";

            if(cnt.innerHTML.trim().length>0) {
                baks.push(new Bak(cnt.innerHTML, Date.now()));
                localStorage.baks = JSON.stringify(baks);
                cnt.innerHTML = "";

                showBaks();
            }
        }
    </script>
</body>
</html>